
<style lang="less" scoped>
.page {
  .box {
    padding: 10px;
  }
  .txt {
    background-color: #333;
    color: #ddd;
    padding: 10px;
    height: 400px;
    width: 330px;
  }
}
</style>

<template>
  <div class="page">
    <button open-type="getUserInfo" @getuserinfo="bindGetUserInfo" @click="getUserInfo">获取权限</button>
    <br>
    <div class="box">
      <image style="height:80px;width:80px;margin:10px auto;display:block;" v-if="avatarUrl" :src="avatarUrl" />
      <textarea v-if="userInfo" readonly class="txt" :value="userInfo"></textarea>
    </div>
  </div>

</template>
<script>
export default {
  data() {
    return {
      userInfo: '',
      avatarUrl: ''
    };
  },
  onload() {
    // 这个时候 不行，可能与生命周期有关系
    // this.getSetting()
  },
  onReady() {
    // 一进来看看用户是否授权过
    this.getSetting();
  },
  methods: {
    getSetting() {
      wx.getSetting({
        success: res => {
          if (res.authSetting[('scope.userInfo', 'scope.userInfo')]) {
            wx.getUserInfo({
              success: res => {
                console.log(res);

                this.avatarUrl = res.userInfo.avatarUrl;
                this.userInfo = JSON.stringify(res.userInfo, null, 2);
                console.log(this.userInfo);

                //用户已经授权过
                console.log('用户已经授权过');
              }
            });
          } else {
            console.log('用户还未授权过');
          }
        }
      });
    },
    getUserInfo() {
      console.log('click事件首先触发');
      // 判断小程序的API，回调，参数，组件等是否在当前版本可用。  为false 提醒用户升级微信版本
      // console.log(wx.canIUse('button.open-type.getUserInfo'))
      if (wx.canIUse('button.open-type.getUserInfo')) {
        // 用户版本可用
      } else {
        console.log('请升级微信版本');
      }
    },
    bindGetUserInfo(e) {
      // console.log(e.mp.detail.rawData)
      if (e.mp.detail.rawData) {
        //用户按了允许授权按钮
        this.avatarUrl = e.mp.detail.userInfo.avatarUrl;
        this.userInfo = JSON.stringify(e.mp.detail.userInfo);

        console.log('用户按了允许授权按钮');
      } else {
        //用户按了拒绝按钮
        console.log('用户按了拒绝按钮');
      }
    }
  }
};
</script>
